<template>
	<div class="groups_dialog_share">
		<h1>分享新闻至：</h1>
		<div class="dialog_content_qrcode">
			<div id="qrCode" ref="qrCodeDiv" class="dialog_content_qrcode_img"></div>
			<div class="dialog_content_qrcode_tip">请在确保安全环境下扫描</div>
		</div>
		<ul class="dialog_content">
			<li>
				<a href="javascript:;" data-id="weibo" @click="shareInfoHandel">
					新浪微博
				</a>
			</li>
			<li>
				<a href="javascript:;" data-id="qzone" @click="shareInfoHandel">
					QQ空间
				</a>
			</li>
			<li>
				<a href="javascript:;" data-id="qq" @click="shareInfoHandel">
					QQ好友
				</a>
			</li>
			<li>
				<a href="javascript:;" data-id="douban" @click="shareInfoHandel">
					豆瓣
				</a>
			</li>
			<!--li>
				<a href="javascript:;" @click="shareInfoHandel">
					menu title
				</a>
			</li-->
			<li>
				<a href="javascript:;" @click="dialogCloseHandle">
					关 闭
				</a>
			</li>
		</ul>
	</div>
</template>
<script>
	import QRCode from 'qrcodejs2';
	export default{
		name:"groups_dialog_share",
		data:function(){
			return{}
		},
		props:["item"],
		mounted:function(){
			new QRCode(this.$refs.qrCodeDiv, {
				text: this.$props.item.link,
				width: 200,
				height: 200,
				colorDark: "#333333", //二维码颜色
				colorLight: "#ffffff", //二维码背景色
				correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
			})
		},
		methods:{
			dialogCloseHandle: function(e){
				this.$emit("dialogCloseHandle")
			},
			shareInfoHandel: function(e){
				let id = $(e.target).attr("data-id"),
					href = null;
				switch(id){
					case 'weibo':
						href = "http://service.weibo.com/share/share.php?url="+this.$props.item.link+"&sharesource=weibo&title="+this.$props.item.title;
						break;
					case 'qzone':
						href = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url="+this.$props.item.link+"&sharesource=qzone&title="+this.$props.item.title+"&summary="+this.$props.item.title;
						break;
					case 'douban':
						href = "https://www.douban.com/recommend/?url="+this.$props.item.link+"&title="+this.$props.item.title;
						break;
					case 'qq':
						href = "https://connect.qq.com/widget/shareqq/index.html?url="+this.$props.item.link+"&desc="+this.$props.item.title;
						break;
					case 'renren':
						href = "http://share.renren.com/share/buttonshare.do?title="+this.$props.item.title+"&link="+this.$props.item.link;
						break;
				}
				window.open(href, "_blank")
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.groups_dialog_share{
		h1{
			font-size: 20/@base;
			font-weight: 400;
			margin:20/@base;
			color:#999;
		}
		.dialog_content_qrcode{
			.dialog_content_qrcode_tip{
				font-size: 20/@base;
				color:#999;
				text-align: center;
				padding:5/@base 0 20/@base 0;
			}
			.dialog_content_qrcode_img{
				text-align: center;
				img{
					margin:10/@base auto;
				}
			}
			border-bottom:1/@base solid #efefef;
		}
		ul{
			&.dialog_content{
				li{
					border-bottom:1/@base solid #efefef;
					margin:0;
					a{
						text-decoration: none;
						color:#333;
						text-align: center;
						padding:16/@base 0;
						display: block;
						border-radius: 10/@base;
					}
					&:last-child{
						border:0;
						background-color: #efefef;
						a{
							color:#333;
						}
					}
				}
			}
		}
	}
</style>